<template>
	<view v-show="pageShow">
		<view style="position: fixed; top: 0; z-index: 2; width: calc(100% - 40rpx); background-color: #F4F5F6;">
			<view class="uni-form-item">
				<view class="title">货品代码</view>
				<view class="uni-input-container">
					<view class="uni-input-view">
						<input class="uni-input" v-model="goodsCode" :focus="true" @confirm="handleConfirmGoodsCode" placeholder="请扫描货品代码发货" />
						<image src="/static/scan.png" class="scan" @click="handleScanGoodsCode" />
					</view>
					<image src="/static/search.png" class="search" @click="handleConfirmGoodsCode" />
				</view>
			</view>
		</view>
		<view class="list-card" style="margin-top: 90rpx;">
			<uni-card :title="'出库单号：' + bill.billNo">
				<view class="item">
					<view class="item-content">
						<label>状态：</label>
						<text class="status" :class="{warning: bill.outBillState != '500'}">{{bill.outBillStateLabel || '-'}}</text>
					</view>
					<view class="item-content">
						<label>类型：</label>
						<text>{{bill.outOrderTypeLabel || '-'}}</text>
					</view>
				</view>
				<view class="item">
					<view class="item-content">
						<label>外部单号：</label>
						<text>{{bill.outOrderNo || '-'}}</text>
					</view>
					<view class="item-content">
						<label>预期发货：</label>
						<text>{{bill.requiredOutTime ? $formatter.formatDate(new Date(bill.requiredOutTime)) : '-'}}</text>
					</view>
				</view>
				<view class="item-footer">
					<view class="footer-item">
						<label>总预期量</label>
						<text>{{bill.totalExpect ? parseInt(bill.totalExpect) : '-'}}</text>
					</view>
					<view class="footer-item">
						<label>总已拣量</label>
						<text>{{computeTotalPickingDeliver(pickingList) + computeTotalPickingDeliver(deliverList)}}</text>
					</view>
					<view class="footer-item">
						<label>总已发量</label>
						<text>{{computeTotalPickingDeliver(deliverList)}}</text>
					</view>
				</view>
			</uni-card>
		</view>
		<view class="list-card" style="margin-top: 50rpx;" v-if="!!pickingList.length || !!deliverList.length">
			<uni-card title="货品明细">
				<view class="list-item-detail" v-for="item in pickingList" :key="item.id">
					<view class="item">
						<view>
							<label>货品代码：</label>
							<text>{{item.goodsCode || '-'}}</text>
						</view>
					</view>
					<view class="item">
						<view>
							<label>货品名称：</label>
							<text>{{item.goodsName || '-'}}</text>
						</view>
					</view>
					<view class="item">
						<view class="item-content">
							<label>拣货货位：</label>
							<text>{{item.goodsLocationCode || '-'}}</text>
						</view>
						<view class="item-content">
							<label>批次号：</label>
							<text>{{item.receiveCargoNo || '-'}}</text>
						</view>
					</view>
					<view class="item-footer">
						<view class="footer-item">
							<label>分配数量</label>
							<text>{{item.amount ? parseInt(item.amount) : '-'}}</text>
						</view>
						<view class="footer-item">
							<label>拣货数量</label>
							<text>{{item.amount ? parseInt(item.amount) : '-'}}</text>
						</view>
						<view class="footer-item" style="padding-top: 20rpx;">
							<button type="primary" size="mini" @click="deliver(item.id)">单笔发货</button>
						</view>
					</view>
				</view>
				<view class="list-item-detail" v-for="item in deliverList" :key="item.id">
					<view class="item">
						<view>
							<label>货品代码：</label>
							<text>{{item.goodsCode || '-'}}</text>
						</view>
					</view>
					<view class="item">
						<view>
							<label>货品名称：</label>
							<text>{{item.goodsName || '-'}}</text>
						</view>
					</view>
					<view class="item">
						<view class="item-content">
							<label>拣货货位：</label>
							<text>{{item.goodsLocationCode || '-'}}</text>
						</view>
						<view class="item-content">
							<label>批次号：</label>
							<text>{{item.receiveCargoNo || '-'}}</text>
						</view>
					</view>
					<view class="item-footer">
						<view class="footer-item">
							<label>分配数量</label>
							<text>{{item.amount ? parseInt(item.amount) : '-'}}</text>
						</view>
						<view class="footer-item">
							<label>拣货数量</label>
							<text>{{item.amount ? parseInt(item.amount) : '-'}}</text>
						</view>
						<view class="footer-item">
							<label>发货数量</label>
							<text>{{item.amount ? parseInt(item.amount) : '-'}}</text>
						</view>
					</view>
				</view>
			</uni-card>
		</view>
		<view class="uni-btn-v" v-if="!!pickingList.length">
			<button type="warn" @click="deliverAll">全部发货</button>
		</view>

		<uni-popup ref="goodsSelect" type="bottom">
			<view class="table">
				<view class="table-head">
					<view class="th">
						<view class="td" style="flex: 1;"></view>
						<view class="td" style="flex: 3;">货品代码</view>
						<view class="td" style="flex: 3;">批次号</view>
					</view>
				</view>
				<scroll-view style="max-height: 600rpx;" scroll-y="true">
					<view class="table-body">
						<view class="tr" v-for="item in selectGoodsList" :key="item.id" @click="handleSelectGoodsCode(item)">
							<view class="td" style="flex: 1;">
								<radio />
							</view>
							<view class="td" style="flex: 3;">{{item.goodsCode || '-'}}</view>
							<view class="td" style="flex: 3;">{{item.receiveCargoNo || '-'}}</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import uniCard from '@/components/uni-card/uni-card.vue';

	export default {
		components: {
			uniCard
		},
		data() {
			return {
				pageShow: false,
				bill: {},
				pickingList: [],
				deliverList: [],
				goodsCode: null,
				selectGoodsList: []
			}
		},
		onLoad(e) {
			this.bill = JSON.parse(e.bill);
			uni.showLoading({
				title: '加载中'
			});
			this.getDetail(() => {
				this.pageShow = true;
				uni.hideLoading();
			}, () => uni.hideLoading());
		},
		methods: {
			computeTotalPickingDeliver(list) {
				if (!list.length) {
					return 0;
				}
				return list.map(v => parseInt(v.amount)).reduce((m, n) => m + n);
			},
			getDetail(successCallback, errorCallback) {
				Promise.all([
					this.$api.outWarehouse.detail(this.bill.id),
					this.$api.outWarehouse.pickingDeliverList({
						outBillId: this.bill.id,
						state: 300,
					}),
					this.$api.outWarehouse.pickingDeliverList({
						outBillId: this.bill.id,
						state: 500,
					})
				]).then(res => {
					Object.assign(this.bill, {
						ownerId: res[0].ownerId,
						outBillState: res[0].outBillState,
						outBillStateLabel: res[0].outBillStateLabel
					});
					this.pickingList = res[1];
					this.deliverList = res[2];
					successCallback && successCallback instanceof Function && successCallback();
				}, () => errorCallback && errorCallback instanceof Function && errorCallback());
			},
			handleScanGoodsCode() {
				this.$scan(res => {
					this.goodsCode = res;
					this.handleConfirmGoodsCode();
				});
			},
			handleConfirmGoodsCode() {
				if (this.goodsCode) {
					this.$api.goods.listScan({
						ownerId: this.bill.ownerId,
						code: this.goodsCode
					}).then(res => {
						const _goodsCodeList = res.data.map(v => v.code.toLowerCase());
						this.selectGoodsList = this.pickingList.filter(v => _goodsCodeList.includes(v.goodsCode.toLowerCase()));
						this.handleConfirmGoodsCodeCallback();
					});
				} else {
					this.selectGoodsList = [...this.pickingList];
					this.handleConfirmGoodsCodeCallback();
				}
			},
			handleConfirmGoodsCodeCallback() {
				if (!this.selectGoodsList.length) {
					uni.showToast({
						title: '未匹配到待发货货品',
						icon: 'none'
					});
					return;
				}
				if (this.selectGoodsList.length === 1) {
					const _goods = this.selectGoodsList[0];
					this.handleSelectGoodsCode(_goods);
				} else {
					this.$refs.goodsSelect.open();
				}
			},
			handleSelectGoodsCode(goods) {
				this.goodsCode = goods.goodsCode;
				this.$refs.goodsSelect.close();
				this.selectGoodsList = [];
				this.deliver(goods.id);
			},
			deliver(id) {
				uni.showLoading({
					title: '发货中'
				});
				this.$api.outWarehouse.deliver({
					list: id
				}).then(() => {
					this.goodsCode = null;
					global.$refresh = true;
					uni.hideLoading();
					uni.showToast({
						title: '发货成功',
						icon: 'success'
					});
					this.getDetail(() => {
						if (this.bill.outBillState === '500') {
							setTimeout(() => {
								uni.showToast({
									title: '发货完成',
									icon: 'none'
								});
								setTimeout(() => {
									uni.navigateBack();
								}, 500);
							}, 1000);
						}
					});
				}, () => uni.hideLoading());
			},
			deliverAll() {
				const ids = this.pickingList.map(v => v.id);
				this.deliver(ids);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.uni-form-item .title {
		width: 120rpx;
	}

	.list-card /deep/ .uni-card {
		margin: 0 0 30rpx 0;
	}

	.list-card /deep/ .uni-card .uni-card__header {
		padding: 10rpx 24rpx;
	}
</style>
